<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Charts - Apache JMeter Dashboard</title>
    <link rel="icon" type="image/x-icon" href="content/favicon.ico">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
            color: #333;
        }
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 230px;
            height: 100vh;
            background: #f8f9fa;
            border-right: 1px solid #dee2e6;
            overflow-y: auto;
        }
        .main-content {
            margin-left: 230px;
            padding: 20px;
        }
        .header {
            background: #fff;
            padding: 15px 20px;
            border-bottom: 1px solid #dee2e6;
            margin-bottom: 20px;
        }
        .header h1 {
            margin: 0;
            font-size: 24px;
            color: #495057;
            font-weight: normal;
        }
        .nav-menu {
            padding: 20px 0;
        }
        .nav-item {
            display: block;
            padding: 10px 20px;
            color: #495057;
            text-decoration: none;
            border-left: 3px solid transparent;
            transition: all 0.2s;
        }
        .nav-item:hover {
            background: #e9ecef;
            text-decoration: none;
            color: #495057;
        }
        .nav-item.active {
            background: #e3f2fd;
            color: #1976d2;
            border-left-color: #1976d2;
        }
        .nav-item i {
            margin-right: 8px;
            width: 16px;
        }
        .chart-container {
            margin: 20px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        .chart-title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 15px;
            color: #495057;
        }
        .footer {
            background: #f8f9fa;
            padding: 20px;
            text-align: center;
            color: #6c757d;
            border-top: 1px solid #dee2e6;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="nav-menu">
            <a href="../index.html" class="nav-item">
                <i>📊</i> Dashboard
            </a>
            <a href="charts.html" class="nav-item active">
                <i>📈</i> Charts
            </a>
            <a href="custom-graphs.html" class="nav-item">
                <i>📋</i> Custom Graphs
            </a>
        </div>
    </div>

    <div class="main-content">
        <div class="header">
            <h1>Charts - Apache JMeter Dashboard</h1>
            <div class="test-info">
                <span>Test Date: 2024-01-15 14:30:00</span>
                <span>Duration: 2.5 hours</span>
                <span>Data Scale: 100 million cold records</span>
            </div>
        </div>

        <div class="chart-container">
            <div class="chart-title">Response Times Over Time</div>
            <div style="background: #fff; padding: 15px; border: 1px solid #dee2e6; margin: 10px 0;">
                <canvas id="responseTimeChart" width="800" height="300" style="max-width: 100%; height: 300px; background: linear-gradient(to right, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);"></canvas>
                <div style="margin-top: 10px; font-size: 12px; color: #6c757d; text-align: center;">
                    <span style="color: #007bff;">■</span> Average Response Time: 76ms | 
                    <span style="color: #28a745;">■</span> 90th Percentile: 145ms | 
                    <span style="color: #ffc107;">■</span> 95th Percentile: 168ms
                </div>
                <script>
                    // Simulated chart data visualization
                    const canvas = document.getElementById('responseTimeChart');
                    const ctx = canvas.getContext('2d');
                    ctx.strokeStyle = '#007bff';
                    ctx.lineWidth = 2;
                    ctx.beginPath();
                    for(let i = 0; i < 800; i += 10) {
                        const y = 150 + Math.sin(i/50) * 30 + Math.random() * 20;
                        if(i === 0) ctx.moveTo(i, y); else ctx.lineTo(i, y);
                    }
                    ctx.stroke();
                </script>
            </div>
        </div>

        <div class="chart-container">
            <div class="chart-title">Bytes Throughput Over Time</div>
            <div style="background: #fff; padding: 15px; border: 1px solid #dee2e6; margin: 10px 0;">
                <canvas id="throughputChart" width="800" height="300" style="max-width: 100%; height: 300px; background: linear-gradient(to right, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);"></canvas>
                <div style="margin-top: 10px; font-size: 12px; color: #6c757d; text-align: center;">
                    <span style="color: #28a745;">■</span> Received: 84.9 KB/sec | 
                    <span style="color: #dc3545;">■</span> Sent: 28.5 KB/sec | 
                    <span style="color: #6f42c1;">■</span> Total: 113.4 KB/sec
                </div>
                <script>
                    // Simulated throughput chart
                    const throughputCanvas = document.getElementById('throughputChart');
                    const throughputCtx = throughputCanvas.getContext('2d');
                    
                    // Received bytes line
                    throughputCtx.strokeStyle = '#28a745';
                    throughputCtx.lineWidth = 2;
                    throughputCtx.beginPath();
                    for(let i = 0; i < 800; i += 10) {
                        const y = 100 + Math.sin(i/60) * 40 + Math.random() * 15;
                        if(i === 0) throughputCtx.moveTo(i, y); else throughputCtx.lineTo(i, y);
                    }
                    throughputCtx.stroke();
                    
                    // Sent bytes line
                    throughputCtx.strokeStyle = '#dc3545';
                    throughputCtx.beginPath();
                    for(let i = 0; i < 800; i += 10) {
                        const y = 200 + Math.sin(i/80) * 25 + Math.random() * 10;
                        if(i === 0) throughputCtx.moveTo(i, y); else throughputCtx.lineTo(i, y);
                    }
                    throughputCtx.stroke();
                </script>
            </div>
        </div>

        <div class="chart-container">
            <div class="chart-title">Latencies Over Time</div>
            <div style="background: #fff; padding: 15px; border: 1px solid #dee2e6; margin: 10px 0;">
                <canvas id="latencyChart" width="800" height="300" style="max-width: 100%; height: 300px; background: linear-gradient(to right, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);"></canvas>
                <div style="margin-top: 10px; font-size: 12px; color: #6c757d; text-align: center;">
                    <span style="color: #17a2b8;">■</span> Average Latency: 68ms | 
                    <span style="color: #fd7e14;">■</span> Max Latency: 285ms | 
                    <span style="color: #6610f2;">■</span> Min Latency: 5ms
                </div>
                <script>
                    // Simulated latency chart
                    const latencyCanvas = document.getElementById('latencyChart');
                    const latencyCtx = latencyCanvas.getContext('2d');
                    latencyCtx.strokeStyle = '#17a2b8';
                    latencyCtx.lineWidth = 2;
                    latencyCtx.beginPath();
                    for(let i = 0; i < 800; i += 10) {
                        const baseLatency = 120;
                        const variation = Math.sin(i/40) * 30 + Math.random() * 25;
                        const y = baseLatency + variation;
                        if(i === 0) latencyCtx.moveTo(i, y); else latencyCtx.lineTo(i, y);
                    }
                    latencyCtx.stroke();
                    
                    // Add grid lines
                    latencyCtx.strokeStyle = '#e9ecef';
                    latencyCtx.lineWidth = 1;
                    for(let i = 0; i < 300; i += 50) {
                        latencyCtx.beginPath();
                        latencyCtx.moveTo(0, i);
                        latencyCtx.lineTo(800, i);
                        latencyCtx.stroke();
                    }
                </script>
            </div>
        </div>

        <div class="chart-container">
            <div class="chart-title">Connect Time Over Time</div>
            <div style="background: #fff; padding: 15px; border: 1px solid #dee2e6; margin: 10px 0;">
                <canvas id="connectChart" width="800" height="300" style="max-width: 100%; height: 300px; background: linear-gradient(to right, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);"></canvas>
                <div style="margin-top: 10px; font-size: 12px; color: #6c757d; text-align: center;">
                    <span style="color: #e83e8c;">■</span> Average Connect Time: 12ms | 
                    <span style="color: #20c997;">■</span> Max Connect Time: 45ms | 
                    <span style="color: #6f42c1;">■</span> Min Connect Time: 2ms
                </div>
                <script>
                    // Simulated connect time chart
                    const connectCanvas = document.getElementById('connectChart');
                    const connectCtx = connectCanvas.getContext('2d');
                    connectCtx.strokeStyle = '#e83e8c';
                    connectCtx.lineWidth = 2;
                    connectCtx.beginPath();
                    for(let i = 0; i < 800; i += 10) {
                        const baseConnect = 200;
                        const variation = Math.sin(i/70) * 15 + Math.random() * 10;
                        const y = baseConnect + variation;
                        if(i === 0) connectCtx.moveTo(i, y); else connectCtx.lineTo(i, y);
                    }
                    connectCtx.stroke();
                    
                    // Add time axis labels
                    connectCtx.fillStyle = '#6c757d';
                    connectCtx.font = '10px Arial';
                    for(let i = 0; i < 800; i += 160) {
                        connectCtx.fillText((i/160 * 5) + 'min', i, 290);
                    }
                </script>
            </div>
        </div>

        <div class="footer">
            <p>Report Generated: 2024-01-15 16:45:00 | JMeter Version: 5.5 | Test Executor: Performance Test Team</p>
            <p>© 2024 Distributed KV Service Performance Test Report - Generated with Apache JMeter</p>
        </div>
    </div>
</body>
</html>